<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="../js/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-header{ background-color: #eee}
        .el-main{ background-color: #ddd; }
        .el-footer{ background-color: #ccc; text-align: center; padding: 5px }
        .el-aside{ background-color: #aaa }
        .el-container,html,body,#app{ height: 100%; margin: 0px; }
        .el-menu{
            background-color: transparent;  /* 修改菜单颜色为透明 */
        }
        .el-menu--horizontal>.el-menu-item,.el-menu--horizontal>.el-submenu{
            float: right;
        }
        iframe{
            width: 100%; height: 100%; border: 0px;
        }
        .el-tabs{
            height: 100%;
        }
        .el-tabs__content {
            height: calc( 100% - 80px);  /* 计算高度值 - 两边要有空格 */
        }
        div[id^='pane-']{
            height: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="6">
                    <h1>XXX商城管理系统</h1>
                </el-col>
                <el-col :span="18">
                    <el-menu mode="horizontal">
                        <el-menu-item>退出</el-menu-item>
                        <el-menu-item>呼叫客服</el-menu-item>
                        <el-submenu>
                            <!-- 这个具名插槽 template 模板标签, 定义内部使用的元素 -->
                            <template slot="title">个人中心</template>
                            <el-menu-item>个人信息</el-menu-item>
                            <el-menu-item>我的购物车</el-menu-item>
                            <el-menu-item>我的订单</el-menu-item>
                            <el-menu-item>我的收藏</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-col>
            </el-row>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu @select="doMenu">
                    <el-submenu index="sub">
                        <template slot="title">机构管理</template>
                        <el-menu-item>部门管理</el-menu-item>
                        <el-menu-item>岗位管理</el-menu-item>
                        <el-menu-item>权限管理</el-menu-item>
                        <el-menu-item index="3">淘宝</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="1">用户管理</el-menu-item>
                    <el-menu-item index="2">书籍管理</el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <el-tabs type="border-card" v-model="current" :editable="true" @tab-remove="delTab">
                    <el-tab-pane v-for="tab in tabs" :label="tab.title" :name="tab.name">
                        <span v-if="tab.type=='text'">{{tab.content}}</span>
                        <div v-else-if="tab.type=='html'" v-html="tab.content" style="height:100%"></div>
                        <iframe v-else-if="tab.type=='href'" :src="tab.content"></iframe>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
        <el-footer height="auto">源辰公司</el-footer>
    </el-container>
</div>

<script>
    var v= new Vue({
        el : "#app",
        data : {
            tabs : [
                {title:"首页",content:"<img src='bg.jpg' style='width:100%;height:100%'>",name:"0", type:"html"},
            ],
            tabs1 : [
                {title:"用户管理",content:"用户管理",name:"1", type:"text"},
                {title:"书籍管理",content:"布局容器.html",name:"2", type:"href"},
                {title:"淘宝",content:"http://taobao.com",name:"3", type:"href"}
            ],
            current: "0"
        },
        methods : {
            doMenu(index, indexPath){
                // index => 1,2,3
                console.info(index);
                console.info(indexPath);
                if(index == null) return;  // 判断 index 是否有定义
                // 在已经打开的 tab 中查找 index, 如果找到, 说明之前就已经打开该 tab
                let tab = this.tabs.find( t => t.name == index);
                if(tab){
                    // 如果找到, 则显示该 tab
                    this.current = tab.name;
                } else {
                    // 在 tabs1 中查找
                    tab = this.tabs1.find( t => t.name == index);
                    // 将 tab 推送到 tabs 中
                    this.tabs.push(tab);
                    // 显示该 tab
                    this.current = tab.name;
                }
            },
            delTab(name){
                // 首页不关
                if(name == "0") return;
                // 删除, 过滤,  保留 tab.name != 该传入的name
                this.tabs = this.tabs.filter( t => t.name != name);
                this.current = "0"
            }
        }
    })
</script>

</body>
</html>